<template>
    <div>
        <a-modal v-model:visible="show" ref="modelRef" hide-title :simple="current === 2" modal-class="open-account"
            :on-before-ok="verify" @cancel="show = false" :mask-closable='false'>
            <CustomTitle title="支付开户" />
            <a-steps v-model:current="current" class="setp">
                <a-step v-for="item in setpList">{{ item.title }}</a-step>
            </a-steps>
            <div class="content">
                <a-form layout="vertical">
                    <a-form-item>
                        <a-radio-group v-model="registerType" @change="stepsChange">
                            <a-radio v-for="item, index in memberType" :value="Number(index)">{{ item }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
                <component :is="components[registerType]" ref="formRef" v-model="form">
                </component>
            </div>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import CustomTitle from "@/components/CustomTitle/index.vue";
import { registerIndividual, registerOrganization, registerIndividualBusiness } from "@/apis/openAccount";
import { payConfig, setpList } from "./config";
import { Message } from '@arco-design/web-vue';
import { useUserStore } from "@/stores/modules/user";
import Individual from "./components/Individual.vue";
import SelfEmployed from "./components/SelfEmployed.vue";
import Enterprise from "./components/Enterprise.vue";
import type { RegisterIndividual, RegisterEnterprise, RegisterIndividualBusiness } from "@/apis/openAccount/type";

const modelRef = ref()
const userStore = useUserStore();
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: true
    },
    currentAccountData: {
        type: Object,
        default: () => { }
    },
    step: {
        type: Number,
        default: 1
    }
});

const memberType = {
    1: '个人',
    2: '企业',
    3: '个体工商户'
}
const components: { [key: number]: any } = {
    1: Individual,
    2: Enterprise,
    3: SelfEmployed
}
/**
 * 租户参数
 */
const tenantParams = {
    businessUserId: userStore.userInfo.tenantId,
    businessType: 1
}
const registerType = ref(1); // 开户类型
// 个人表单
const form = ref<RegisterIndividual | RegisterEnterprise | RegisterIndividualBusiness>({} as RegisterIndividual | RegisterEnterprise | RegisterIndividualBusiness)
const registered = ref(false)// 是否曾经注册过
const stepsChange = () => {
    registered.value = false;
    form.value = {} as RegisterIndividual | RegisterEnterprise | RegisterIndividualBusiness;
    formRef.value.resetFields()
}
const emit = defineEmits(['update:modelValue']);
const show = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})
const formRef = ref()
/**
 * 校验表单
 */
const validateForms = async () => {
    let result = false;
    switch (current.value) {
        case 1:
        case 2:
        case 3:
            result = await formRef.value.validate();
            break;
        default:
            break;
    }

    return result;

}
const verify = async () => {
    try {
        if ((await validateForms())) {
            comfirm()
        }
    } catch (error) {
    }
    return false;
}
/**
 * 注册个人
 */
const enrollIndividual = async () => {
    const params = {
        ...form.value,
        ...payConfig,
        ...tenantParams,
    }
    await registerIndividual(params as RegisterIndividual);
}
/**
 * 注册企业
 */
const enrollOrganization = async () => {
    const params = {
        ...form.value,
        ...payConfig,
        ...tenantParams,
    }
    await registerOrganization(params as RegisterEnterprise);
}
/**
 * 注册个体工商户
 */
const enrollSelfEmployed = async () => {
    const params = {
        ...form.value,
        ...payConfig,
        ...tenantParams,
    }
    await registerIndividualBusiness(params);
}
const register = async () => {
    // registered：是否已经映射
    // registerType：1：个人，2：企业 3:个体工商户
    try {
        switch (registerType.value) {
            case 1:
                await enrollIndividual()
                break;
            case 2:
                await enrollOrganization();
                break;
            case 3:
                await enrollSelfEmployed();
                break;
            default:
                break;
        }
        show.value = false;
        Message.success('注册成功');
    } catch (error) {

    }
}

const comfirm = async () => {
    try {
        register()
    } catch (error) {

    }
}
const current = ref(1);
</script>

<style scoped lang="scss">
.setp {
    margin: 20px 0;

    ::v-deep(.arco-steps-item-title::after) {
        background: unset !important;
        border-top: 1px dashed #D8D8D8;
    }
}

.content {
    max-height: 70vh;
    overflow-y: scroll;
    position: relative;

    &::-webkit-scrollbar {
        width: 4px;
    }

    .input-select {
        flex: 1;
        display: flex;
        gap: 6px;
    }
}

::v-deep(.space) {
    flex: 1;
    display: flex;
    gap: 10px;
}

.upload-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    flex: 1;

    >div {
        width: 100%;
        text-align: center;
        color: #3D3D3D;
    }

    .upload-ele {
        background: #F2F3F5;
        height: 144px;
        margin-bottom: 10px;
        padding-top: 40px;
        box-sizing: border-box;
    }

    .upload-img-preview {
        height: 144px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    ::v-deep(.arco-upload) {
        display: block;
        color: #C9CDD4;
        text-align: center;

        .arco-icon {
            display: block;
            margin: 0 auto 10px;
            font-size: 30px;
        }
    }
}


.space {
    flex: 1;
    display: flex;
    gap: 10px;
}

.name {
    width: 200px;
    height: 60px;
    border: 1px solid #DCDFE6;
    text-align: center;
    line-height: 60px;
    margin: 32px auto;
}

.bind-iphone {
    background: #F5F7FA;
    padding: 20px 20px 0;
    box-sizing: border-box;
    overflow: hidden;

    .success {
        font-size: 12px;
        color: #3D3D3D;
        margin-bottom: 16px;
    }

    .green {
        color: #19CC15;
    }

    ::v-deep(.arco-input-wrapper) {
        background: white !important;
    }

    .error {
        color: #3D3D3D;

        span {
            color: #FF3333;
        }

        .desc {
            margin: 8px 0 20px;
            font-size: 12px;
            color: #86909C;
        }
    }
}

.liaison {
    background: #F5F7FA;
    font-size: 12px;
    flex: 1;
    line-height: 30px;
    padding: 10px;
    margin-top: 2px;

    >div {
        color: #86909C;
    }

    .is-link {
        color: #007DFF;
        cursor: pointer;
    }
}
</style>
<style lang="scss">
.open-account {
    .arco-modal-footer {
        margin-top: 20px;
    }
}
</style>